<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head></head>
<body>
	<div th:fragment="content">
		<div class="row">
	        <div class="col-xs-12">
	          <div class="box"> 
	       		<div class="box-header">
	          	  <!-- 按钮组 -->
	              <div class="btn-group operation">
					  <button id="btn_add" type="button" class="btn bg-primary">
					    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
					  </button>
					  <button id="btn_edit" type="button" class="btn bg-info">
					    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
					  </button>
					  <button id="btn_delete" type="button" class="btn btn-success">
					    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
					  </button>
				  </div>
				  <!-- end 按钮组 -->
	           	</div>                       
	            <div class="box-body">
					<table id="roles" class="table table-bordered table-striped">
		                <thead>
		                <tr>
		                  <th>角色编号</th>
		                  <th>角色名称</th>
		                </tr>
		                </thead>
		            </table>
	            </div>
	          </div>
	        </div>
    	</div>
            
		 <script th:inline="none">
		 $(function () {
			 var table = $('#roles').DataTable({
		    	'ajax'        : "role/list",
		    	'paging'      : false,
		        'lengthChange': false,
		        'searching'   : false,
		        'info'        : false,
		        'sort'        : false
		    });
		  	//绑定表格选择行事件
			$('#roles tbody').on( 'click', 'tr', function () {
		         	if ( $(this).hasClass('selected') ) {
		             	$(this).removeClass('selected');
		         	}
		         	else {
		             	table.$('tr.selected').removeClass('selected');
		             	$(this).addClass('selected');
		         	}
		     	});
		  
			//绑定添加按钮事件
			$('#btn_add').click( function () {
			 	$('#modal-add').modal()
			});
		  
			//绑定编辑按钮事件
			$('#btn_edit').click( function () {
				var rid;
				try{
				 	rid = table.row('.selected').data()[0];
				}catch(err){
				 	return;
				}

				$.ajax({
			        url: "role/get",
			        method: 'get',
			        data : {'rid':rid},
					// 通过headers对象设置请求头
			        /*headers: {
			            'User-Token': localStorage.getItem("User-Token")
			        },*/
			        success(data) {
			        	$("#rname").val(data.rname);
						$("#rid").val(data.rid);
						$('#modal-edit').modal();
			        },
			        dataType: 'json',
			    });
			});
		  	//绑定删除按钮事件
		  	$('#btn_delete').click( function () {
			  	var rid;
				try{
				 	rid = table.row('.selected').data()[0];
				}catch(err){
				 	return;
				}
			    if(!confirm('确认删除吗?')){
			    	return;
			    }
			    $.post(
		    		'role/delete', 
		    		{'rid':rid},
		            function (obj) {
			            if (obj.Status == 'ok') {
			                table.ajax.reload();
			                
			            } else {
			                alert(obj.msg);
			            }
		            }, 
		            'json'
		        );
			    
		  	});
		  
		  	//添加角色
		  	$('#btn_save').click( function () {
			    var data = $('#add_form').serialize();
			    $.ajax({
			        url: "role/add",
			        method: 'post',
			        data : data,
					// 通过headers对象设置请求头
					/*
			        headers: {
			            'User-Token': localStorage.getItem("User-Token")
			        },*/
			        success(obj) {
			        	if (obj.Status == 'ok') {
	                        table.ajax.reload();
	                        $('#modal-add').modal('hide');
	                    } else {
	                        alert(obj.msg);
	                    }
			        },
			        dataType: 'json',
			    });

		  	});
		  
		  	//修改角色
		  	$('#btn_update').click( function () {
			    var data = $('#edit_form').serialize();

			    $.ajax({
			        url: "role/update",
			        method: 'post',
			        data : data,
					// 通过headers对象设置请求头
			        /*headers: {
			            'User-Token': localStorage.getItem("User-Token")
			        },*/
			        success(obj) {
			        	if (obj.Status == 'ok') {
	                        table.ajax.reload();
	                        $('#modal-edit').modal('hide');
	                    } else {
	                        alert(obj.msg);
	                    }
			        },
			        dataType: 'json',
			    });
		  	});	  
		 })
		</script>
			
		<!-- 添加模态框 -->
		<div class="modal fade" id="modal-add">
		   <div class="modal-dialog">
		     <div class="modal-content">
		       <div class="modal-header">
		         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		           <span aria-hidden="true">&times;</span></button>
		         <h4 class="modal-title">添加角色</h4>
		       </div>
		       <div class="modal-body">
		         <div class="box box-primary">
		            <!-- /.box-header -->
		            <!-- form start -->
		            <form role="form" id="add_form">
		              <div class="box-body">                
		                <div class="form-group">
		                  <input type="text" class="form-control" name="rname" placeholder="角色名">
		                </div>                                
		              </div>
		              <!-- /.box-body -->
		            </form>
		          </div>
		       </div>
		       <div class="modal-footer">
		         <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
		         <button type="button" class="btn btn-primary" id="btn_save">保存</button>
		       </div>
		     </div>
		     <!-- /.modal-content -->
		   </div>
		   <!-- /.modal-dialog -->
		</div>
		<!-- end 添加模态框 -->
		
		<!-- 编辑模态框 -->
		<div class="modal fade" id="modal-edit">
		   <div class="modal-dialog">
		     <div class="modal-content">
		       <div class="modal-header">
		         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		           <span aria-hidden="true">&times;</span></button>
		         <h4 class="modal-title">修改角色</h4>
		       </div>
		       <div class="modal-body">
		         <div class="box box-primary">
		            <!-- /.box-header -->
		            <!-- form start -->
		            <form role="form" id="edit_form">
		              <div class="box-body">                
		                <div class="form-group">
		                  <label>角色名</label>
		                  <input type="hidden" id="rid" name="rid">                  
		                  <input type="text" class="form-control" id="rname" name="rname">
		                </div>                              
		              </div>
		              <!-- /.box-body -->
		            </form>
		          </div>
		       </div>
		       <div class="modal-footer">
		         <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
		         <button type="button" class="btn btn-primary" id="btn_update">保存</button>
		       </div>
		     </div>
		     <!-- /.modal-content -->
		   </div>
		   <!-- /.modal-dialog -->
		 </div>
		<!-- end 编辑模态框 -->
	</div>
</body>

